<script setup lang="ts">
import {computed, reactive, ref} from "vue";
import {DepartInfo, BranchInfo, UserInfo} from "@/ts/personnel/DepartInfo";
import {ElMessage, FormInstance, FormRules} from "element-plus";


const props = defineProps<{
  branchList: BranchInfo[],
  userInfoList: UserInfo[],
  updDepartVO: DepartInfo,
}>();

const emits = defineEmits<{
  (e: 'toUpdDepartInfo', value: DepartInfo): void
  (e: 'toCancel', value: boolean): void
}>()

const departRoleFormRef = ref<FormInstance>();
const departInfo = computed(() => {
  return props.updDepartVO;
})

const rules = reactive<FormRules<DepartInfo>>({
  departName: [
    {required: true, message: '请输入部门名', trigger: 'blur'},
  ],
  branchId: [
    {required: true, message: '请选择机构', trigger: 'blur'},
  ],
  principalUser: [
    {required: true, message: '请选择负责人', trigger: 'blur'},
  ],
  connectTelNo: [
    {required: true, message: '请输入联系电话', trigger: 'blur'},
  ],
  connectMobileTelNo: [
    {required: true, message: '请输入移动电话', trigger: 'blur'},
  ]
})

const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
      emits('toUpdDepartInfo', departInfo.value);
    } else {
      ElMessage("请按照规则填写")
    }
  })
}
</script>

<template>
  <el-form :rules="rules" :label-position="'right'" label-width="auto" :model="departInfo" ref="departRoleFormRef">
    <el-form-item label="部门ID">
      <el-input disabled v-model="departInfo.departId"/>
    </el-form-item>
    <el-form-item label="部门名称" prop="departName">
      <el-input v-model="departInfo.departName"/>
    </el-form-item>
    <el-form-item label="机构" prop="branchId">
      <el-select
          v-model="departInfo.branchId"
          size="large"
          style="width: 100%"
      >
        <el-option
            v-for="d in branchList"
            :label="d.branchName"
            :value="d.branchId"
        />
      </el-select>
    </el-form-item>
    <el-form-item label="负责人" prop="principalUser">
      <el-select
          v-model="departInfo.principalUser"
          size="large"
          style="width: 100%"
      >
        <el-option
            v-for="u in userInfoList"
            :label="u.userName"
            :value="u.userId"
        />
      </el-select>
    </el-form-item>
    <el-form-item label="联系电话" prop="connectTelNo">
      <el-input v-model="departInfo.connectTelNo"/>
    </el-form-item>
    <el-form-item label="移动电话" prop="connectMobileTelNo">
      <el-input v-model="departInfo.connectMobileTelNo"/>
    </el-form-item>
    <el-form-item label="传真">
      <el-input v-model="departInfo.faxes"/>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="submitForm(departRoleFormRef)">添加</el-button>
      <el-button type="danger" @click="$emit('toCancel',false)">取消</el-button>
    </el-form-item>
  </el-form>
</template>

<style scoped>

</style>